<template>
    <view class="wrapper" @tap.stop="navToDetail(info)">
        <view class="wrap-box">
            <view class="square-wrap">
                <view class="square-box">
                    <image :src="info.thumb" mode="aspectFill" lazy-load></image>
                </view>
            </view>
            <view class="content">
                <view class="text-df text-333 text-cut-2">{{info.name}}</view>
                <view class="flex justify-between align-center text-sm text-999 margin-top-sm">
                    <view class="flex user-info align-center">
                        <image :src="info.thumb" mode="aspectFill"></image>
                        <text> {{info.username}}</text>
                    </view>
                    <text class="cuIcon-like"> <text style="margin-left: 6rpx;">{{info.num}}</text> </text>
                </view>
                <view class="goods-info">
                    <view class="flex  align-center"  >
                        <view class="goods-info-left">
                            <image :src="info.goods_info.good_url" mode="aspectFill"></image>
                        </view>
                        <view class="goods-info-right">
                            <view class="title">
                                {{info.goods_info.good_name}}
                            </view>
                            <view class="price">
                                ￥{{info.goods_info.good_price}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object
            },
        },
        methods: {
            navToDetail(item) {
                //   this.$urouter.navigateTo({
                //     url: '/pages/goods/goodsdetail/goods-detail',
                //     params: {
                //       sku_id: item.sku_id || 0,
                //       goods_id: item.id,
                //     }
                //   })
            },
        },
    }
</script>

<style lang="scss" scoped>
    .wrapper {
        /* height: 570rpx; */
        overflow: hidden;
        margin-top: 20rpx;
        padding: 0 10rpx;

        .wrap-box {
            background-color: #FFFFFF;
            border-radius: 24rpx;

            .square-wrap {
                width: 100%;
                height: 0;
                padding-bottom: 100%;
                box-sizing: border-box;
                position: relative;

                .square-box {
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    border-radius: 24rpx 24rpx 0 0;

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 24rpx 24rpx 0 0;
                    }
                }
            }
        }

        .content {
            padding: 20rpx;
        }
    }

    .text-cut-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .text-through {
        text-decoration: line-through;
    }

    .text-333 {
        color: #333333;
    }

    .text-999 {
        color: #999999;
    }

    .user-info {
        image {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            margin-right: 5rpx;
        }

        text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 180rpx;
        }
    }

    .goods-info{
        border-top: 1px solid #f1f1f1;
        padding-top: 10rpx;
        margin-top: 10rpx;
        image{
        width: 90rpx;
        height: 90rpx;
        border-radius: 10rpx;
        margin-right: 5rpx;
    }
    .goods-info-right{
        margin-left: 8rpx;
        .title{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 200rpx;
        }
        .price{
        color: #be5d2a;
    }
    }
   
    }
   
</style>